import React, { Component } from "react";
import { NavBar, Icon } from "antd-mobile";
import { connect } from "react-redux";
import store from "../../store";
import { getGoodsDetail } from "../../store/Find/actions";
import "./index.scss";
import Swiper from "../../components/swiper";
import { Link } from "react-router-dom";
class Goods extends Component {
  state = {
    goods: []
  };

  render() {
    const { goods } = this.props;

    return (
      <div className=" ">
        <NavBar
          className="navbar"
          mode="light"
          icon={
            <Icon
              type="left"
            />
          }
          rightContent={<Icon key="1" type="ellipsis" />}
        >
          发现
        </NavBar>
        <div className="hg_goodsList">
          <div className="goodsList">
            <Swiper autoplay={true} slide={this.props.goods} />

            <div className="pic-list">
              <ul>
                {goods[1] &&
                  goods[1].home3.item.map((item, index) => {
                    return (
                      <li key={index}>
                        <img src={item.image} alt="" />
                      </li>
                    );
                  })}
              </ul>
            </div>
            <div className="title">
              <div className="title-bar">
                <span>{goods[2] && goods[2].goods.title} </span>
              </div>
              <ul className="goods-list">
                {goods[2] &&
                  goods[2].goods.item.map((item, index) => {
                    return (
                      <Link
                        to={`/details/${item.goods_id}`}
                        key={item.goods_id}
                      >
                        <li key={item.goods_id}>
                          <div>
                            <img src={item.goods_image} alt="" />
                          </div>
                          <dl>
                            <dt> {item.goods_name} </dt>
                            <dd>
                              ￥ <em> {item.goods_price} </em>
                            </dd>
                          </dl>
                        </li>
                      </Link>
                    );
                  })}
              </ul>
              <div className="title-bar">
                <span>{goods[3] && goods[3].goods.title} </span>
              </div>
              <ul className="goods-list">
                {goods[3] &&
                  goods[3].goods.item.map((item, index) => {
                    return (
                      <Link
                        to={`/details/${item.goods_id}`}
                        key={item.goods_id}
                      >
                        <li key={index}>
                          <div>
                            <img src={item.goods_image} alt="" />
                          </div>
                          <dl>
                            <dt> {item.goods_name} </dt>
                            <dd>
                              ￥ <em> {item.goods_price} </em>
                            </dd>
                          </dl>
                        </li>
                      </Link>
                    );
                  })}
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.props.getGoods();
  }
}
const GoodsList = connect(
  state => {
    return {
      goods: state.find.goods
    };
  },
  dispatch => ({
    getGoods: () => {
      store.dispatch(getGoodsDetail());
    }
  })
)(Goods);
export default GoodsList;
